<template>
  <div class="mod-demo-echarts">
<!--    <el-alert-->
<!--      title="提示："-->
<!--      type="warning"-->
<!--      :closable="false">-->
<!--      <div slot-scope="description">-->
<!--        <p class="el-alert__description">1. 此Demo只提供ECharts官方使用文档，入门部署和体验功能。具体使用请参考：http://echarts.baidu.com/index.html</p>-->
<!--      </div>-->
<!--    </el-alert>-->

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div id="J_chartPieBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="J_chartLineBox" class="chart-box" style="padding:20px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import {countByInterface, countByInterfaceId } from '@/api/log'
  export default {
    data () {
      return {
        chartPie: null
      }
    },
    mounted () {
      this.initChartPie()
      this.initChartLine('invokeCreate', '建档接口')
    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartPie) {
        this.chartPie.resize()
      }
    },
    methods: {

      async init () {
        let data = []
        await countByInterface({}).then(res => {
          data = res.data.data
        })
        return data
      },

      // 饼状图
      async initChartPie () {
        let datas = await this.init()
        let pieData = []
        datas.forEach(item => {
          let pie = {
            value: item.reqCount,
            name: item.interfaceName,
            code: item.interfaceIdentify
          }
          pieData.push(pie)
        })
        var option = {
          backgroundColor: '#2c343c',
          title: {
            text: '各接口请求数量',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '接口请求',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: pieData.sort(function (a, b) { return a.value - b.value }),
              roseType: 'radius',
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        }
        this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
          // 处理点击事件
        let that = this
        this.chartPie.on('click', function (params) {
          let interfaceIdentity = params.data.code
          that.initChartLine(interfaceIdentity, params.data.name)
          // console.log(params)
        })
      },

        // 折线图
      async initChartLine (identity, title) {
        let xdatas = []
        let ydatas = []
        let params = {
          interfaceIdentify: identity
        }
        await countByInterfaceId(params).then(res => {
          if (res.data.data) {
            res.data.data.forEach(item => {
              xdatas.push(item.oneDay)
              ydatas.push(item.reqCount)
            })
          }
        })
        var option = {
          'title': {
            'text': '接口一周请求情况'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ title ]
          },
          'grid': {
            'left': '3%',
            'right': '8%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              // 'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': xdatas
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': title,
              'type': 'line',
              'stack': '总量',
              'data': ydatas
            }

          ]
        }
        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      }

    }
  }
</script>

<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
</style>
